<template>
    <div class="TListFull">

        <div class="flex TF-headline">
            <div class="flex-left" style="color:#2CA6E0;font-weight:700" @click="setListShow">
                <span class="flex-img cursor"><img src="@/assets/img/right.png"
                        style="width: 16px;height: 20px;" />返回</span>
            </div>
            <div class="flex-rgiht">
                <span class="gray">电台列表</span>
            </div>
        </div>
        <div class="hnli-popup hp3 flex">
            <div class="flex flex-left">
                <input v-model="search" class="search" placeholder="输入电台ID/电台名称/地点">
                <el-button class="TF-button" color="#2BA0C8"><text style="font-size:15px">查 询</text></el-button>
            </div>
            <div class="flex-rgiht">
                <el-button class="TF-button" color="#F1BF35"><text style="font-size:15px" @click="setRadio(true, null)">新
                        添</text></el-button>
            </div>
        </div>

        <div class="table-box" style="height: calc(100% - 200px);">
            <el-table :data="tableData" :stripe="false" class="TF-table">
                <el-table-column prop="name" label="电台名称" align="center" />
                <el-table-column prop="name" label="平台" align="center">
                    <template #default="scope">
                        <img src="@/assets/img/homeicon.png"
                            style="width: 16px; height: 16px;margin-right: 5px; justify-content: center;" />
                    </template>
                </el-table-column>
                <el-table-column prop="pattern" label="天调" align="center" />
                <el-table-column prop="pattern" label="GPS" align="center" />
                <el-table-column prop="pattern" label="在线时间" align="center" />
                <el-table-column prop="pattern" label="天线编号" align="center" />
                <el-table-column prop="pattern" label="传感器" align="center" />

                <el-table-column prop="pattern" label="模式" align="center" />
                <el-table-column prop="state" label="操作" width="180" align="center">
                    <template #default="scope">
                        <div class="flex-img">
                            <text class="cursor" style="color: #2BA0C8; margin: 0 5px;" @click="">编辑</text>
                            <text class="cursor" style="color: #F1BF35;margin: 0 10px;">查看</text>
                            <img class="cursor" src="@/assets/img/delete7.png" style="width: 20px; margin: 0 2px;
                    height: 20px;" />
                        </div>

                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="TF-total flex">
            <div class="flex-left" style="margin-left: 20px; color: #9A9DAA;">共有{{ total }}项数据</div>
            <el-pagination class="flex-right" style="margin-right: 50px;" layout="prev, pager, next" :total="total" small />
        </div>


        <el-dialog v-model="radio.visible" :title="radio.title" width="746" class="role-add">
            <el-form :model="form" label-width="120px">
                <el-form-item label="名称">
                    <el-input v-model="form.name" style="width:240px;" placeholder="菜单名称" />
                </el-form-item>
                <el-form-item label="版本">
                    <el-input v-model="form.version" type="number" style="width: 240px;" />
                </el-form-item>
            </el-form>
            <template #footer>

                <span class="dialog-footer">
                    <el-button @click="setRadio(false,null)">取消</el-button>
                    <el-button type="primary" @click="radioSubmit">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
    
<script>
import TelegramList from '@/components/TelegramList/index.vue'
export default {

    props: {
        full: Boolean,
        tableData: Array,
        total: Number,
        inputSearch: String,
    },
    name: 'TelegramListFull',
    data() {
        return {
            search: '',
            form: {
                id: null,
                name: null,
                version: null,
            },
            radio: {
                visible: false,
                title: '',
            },
        }
    },

    components: {
        TelegramList,
    },
    methods: {
        setListShow() {
            this.$emit('setListShow', false);
        },
        radioSubmit() {

        },
        setRadio(value, row) {
            if (value) {
                this.radio.visible = true;
                if (row == null) {
                    this.radio.title = '新增电台'
                    this.reset()
                } else {
                    this.form = row;
                    this.radio.title = '编辑电台'
                }
            } else {
                this.rodio.visible = false
            }
        },
        reset() {
            this.form = {
                id: null,
                name: null,
                version: null,
            }
        },

    }
}
</script>

<style lang="scss">
.TListFull {
    width: 100%;
    height: calc(100% + 10px);
    background: linear-gradient(to right, #2C334C, #1D2435);
    position: relative;
    bottom: 10px;

    /* //表格头部圆角 */
    .el-table__header-wrapper {
        border-radius: 8px;
        z-index: 100 !important;
        overflow: hidden;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    /* //此代码是让每行左侧变圆 */
    .el-table td:first-child {
        border-radius: 50px 0 0 50px;
        padding: 2px;
        z-index: 999;
        padding-left: 20px;
    }

    /* //此代码是让每行右边侧变圆 */
    .el-table td:last-child {
        border-radius: 0 50px 50px 0;
        z-index: 999;
        padding: 2px;
    }

}


.TF-table {

    // height: calc(100% - 200px);
    height: 100%;
}

.TF-total {
    width: 100%;
    margin-top: 10px;
}

.TF-button {
    width: 116px;
    margin: 20px 10px;
    border: none;
    outline: none;
    /* 去除聚焦时的边框 */
    border-radius: 40px;
    padding: 0 20px;
    color: white;
    height: 48px;
    font-size: 20px;
}

.search {
    width: 380px;
    height: 48px;
    margin: 20px 10px;
    border: none;
    outline: none;
    /* 去除聚焦时的边框 */
    border-radius: 40px;
    background: #171D2C;
    padding: 0 20px;
    color: #636F75;
}

.TF-headline {
    width: 100%;
    height: 60px;
    line-height: 50px;
    border-bottom: solid 1px linear-gradient(to left, #272E45, #20273A);
    background: linear-gradient(to right, #313B53, #272F43);
    border-radius: 10px 10px 0px 0px;
    position: relative;
    // bottom: 10px;
    z-index: 100;

    span {
        margin: 0 20px;
    }
}

.TF-headline {
    position: relative;
}

.TF-headline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #272E45, #20273A);
}</style>
    